<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">
      {{title}}
    </template>
    <el-form :model="form" ref="withdrawForm" :rules="withdrawRule" :label-width="formLabelWidth">
      <div v-if="step == 'agree'">
        <el-form-item label="姓名" :rules="withdrawRule">
          <el-col :span="16">
            <el-input :value="rowData.name" @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="银行名称">
          <el-col :span="16">
            <el-input :value="rowData.bankName" @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="银行卡号">
          <el-col :span="16">
            <el-input :value="rowData.cardNo" @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="开户地址">
          <el-col :span="16">
            <el-input :value="rowData.address" @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="提现确认金额">
          <el-col :span="16">
            <el-input v-model="rowData.paragraph" @click.native="copy" readonly auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <!-- <el-form-item prop="type" label="强制手动出款">
          <el-radio-group v-model="form.type">
            <el-radio-button :label="1">是</el-radio-button>
            <el-radio-button :label="0">否</el-radio-button>
          </el-radio-group>
        </el-form-item> -->
      </div>
      <el-tip style="padding: 10px 0 10px 150px;" v-if="step == 'back'">确定退回 <span style="color:#e6a23c;">{{rowData.name}}</span>
        的提款处理吗?
      </el-tip>
      <el-form-item label="理由：" prop="rejectReason" v-if="step !== 'agree'">
        <el-col :span="16">
          <el-select v-if="step == 'refuse'" v-model="form.rejectReason" placeholder="请选择" size="medium">
            <el-option
              v-for="( item , index ) in refuseReasons"
              :key="index"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-col :span="16">
          <el-input type="textarea" v-model="form.remark"></el-input>
          <el-tip v-if="step == 'agree'">*确认后则用户前台显示出款成功</el-tip>
          <el-tip v-else-if="step == 'refuse'">*确认后则用户前台显示提现失败，提现金额退回中心钱包</el-tip>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'withdrawForm'})" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

import { form } from '@/build';
import { returnWithdrawSave, updateWithdrawNormalStatus, withdrawRefuseReasonList } from '@/services/api/withdraw';

export default {
  name: 'normal-withdraw-dialog',
  props: ['value', 'id', 'step', 'rowData'],
  mixins: [form],
  data() {
    return {
      formLabelWidth: '150px',
      refuseReasons: [],
      form: {
        status: undefined,
        orderId: this.rowData.orderId,
        rejectReason: '',
      },
      withdrawRule: {
        type: [
          { required: true, message: '强制手动出款为必选项', trigger: 'blur' },
        ],
        rejectReason: [
          { required: true, message: '请选择拒绝理由', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    title() {
      switch (this.step) {
        case 'refuse':
          return '拒绝提现申请';
        case 'agree':
          return '提现申请';
        case 'back':
          return '退回';
      }
    },
  },

  mounted() {
    this.getRefuseReasons();
    if (this.step == 'back') {
      this.bindSave(returnWithdrawSave, 'saveForm', 'form', {
        afterSuccess: () => {
          this.cancel();
          this.$parent.gridSearch();
        },
      });
    } else {
      this.bindSave(updateWithdrawNormalStatus, 'saveForm', 'form', {
        beforeSend: (data) => {
          switch (this.step) {
            case 'refuse':
              data.status = 2;
              break;
            case 'agree':
              data.status = 1;
              break;
            case 'back':
              data.status = 0;
              break;
          }

          return data;
        },
        afterSuccess: () => {
          this.cancel();
          this.$parent.gridSearch();
        },
      });
    }
  },
  methods: {
    getRefuseReasons() {
      this.bindGet(withdrawRefuseReasonList, 'refuseReasons', {
        action: 'getRefuseReasons',
        format: (data) => {
          const refuseReasons = [];
          for (const item of data) {
            refuseReasons.push({
              value: item,
            });
          }
          if (this.step !== 'agree') {
            this.form.rejectReason = refuseReasons[0].value;
          }

          return refuseReasons;
        },
      });
      this.doGet({ action: 'getRefuseReasons' });
    },
    cancel() {
      this.$parent.type = 0;
      this.$parent.doGet({ action: 'setGrid' });
      this.$emit('input', false);
    },
    copy(e) {
      const iptDom = e.target;
      iptDom.select(); // 选择对象
      document.execCommand('Copy'); // 执行浏览器复制命令
      this.$notify.success({
        title: '复制成功',
        duration: 2000,
      });
    },
  },

};
</script>

<style lang="scss" scoped>
  .el-select {
    width: 100%;
  }
</style>
